<template>
  <div class="highquality">
    <div class="title">
      <span>精品歌单</span>
      <el-select v-model="cat" placeholder="请选择" size="mini" @change="catChange">
        <el-option v-for="(item, index) in highqualitytags" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="list">
      <div class="li" v-for="(item, index) in playlists" :key="index" @click="toSongsList(item.id)">
        <div class="img">
          <img :src="item.coverImgUrl" style="width: 100%; height: 100%;" />
          <div class="playCount"><i class="el-icon-headset"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}</div>
          <div class="huangguan"><i class="iconfont icon-huangguan"></i></div>
          <i class="icon el-icon-video-play"></i>
        </div>
        <div class="right">
          <div class="tag">
            <el-tag effect="plain" size="mini">{{ item.tag }}</el-tag>
            <span class="name">{{ item.name }}</span>
          </div>
          <span class="nickname">by {{ item.creator.nickname }}</span>
          <span class="coverwriter">{{ item.copywriter }}</span>
        </div>
      </div>
      <div v-if="playlists.length === 0" style="font-size: 20px; margin-top: 50px;">暂无数据 ......</div>
    </div>
  </div>
</template>

<script>
import { getHighQualityTags, getHighQualityList } from '../../../network/songs.js'
export default {
  data () {
    return {
      // selectValue: '全部',
      highqualitytags: [],
      cat: '全部',
      updateTime: 0,
      playlists: []
    }
  },
  methods: {
    toSongsList (id) {
      this.$router.push('/songs/' + id)
    },
    catChange (event) {
      // console.log(event)
      this.cat = event
      this.getHighQualityList(this.cat, this.updateTime)
    },
    getHighQualityTags () {
      getHighQualityTags().then(res => {
        // console.log(res.data)
        res.data.tags.forEach(item => {
          this.highqualitytags.push({
            value: item.name,
            label: item.name
          })
        })
        // console.log(this.highqualitytags)
      })
    },
    getHighQualityList (cat, updateTime) {
      getHighQualityList(cat, updateTime).then(res => {
        // console.log(res.data)
        this.updateTime = res.data.lasttime
        this.playlists = res.data.playlists
        // console.log(this.playlists)
      })
    }
  },
  created () {
    this.getHighQualityTags()
    this.getHighQualityList(this.cat, this.updateTime)
  }
}
</script>

<style lang="less" scoped>
  .highquality {
    width: 95%;
    margin: 20px auto;
    .title {
      width: 100%;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e1e1e2;
      span {
        font-size: 25px;
        align-items: flex-end;
      }
      .el-select {
        width: 120px;
      }
    }
    .list {
      width: 100%;
      // margin-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .li {
        width: 420px;
        display: flex;
        justify-content: flex-start;
        padding: 20px 0;
        border-bottom: 1px solid #efefef;
        .img {
          width: 125px;
          height: 125px;
          position: relative;
          img {
            width: 100%;
          }
          .playCount {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 25px;
            font-size: 14px;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
            transform: translateY(0);
            transition: transform 0.5s;
          }
          .huangguan {
            position: absolute;
            top: 2%;
            left: 5%;
          }
          .el-icon-video-play {
            position: absolute;
            bottom: 5%;
            right: 3%;
            font-size: 0px;
            color: #ebebeb;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
          }
          .el-icon-video-play:hover {
            background: rgba(0, 0, 0, 0.5);
          }
        }
        .img:hover .el-icon-video-play {
          font-size: 30px;
        }
        .right {
          padding:5px 0 20px 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .tag {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .el-tag {
              margin-right: 5px;
              font-size: 14px;
            }
            .name {
              width: 200px;
              font-size: 15px;
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .nickname {
            font-size: 14px;
            color: #888888;
            text-align: left;
            padding-bottom: 10px;
          }
          .coverwriter {
            font-size: 15px;
            color: #666666;
            text-align: left;
          }
        }
      }
    }
  }
</style>
